<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <link rel="stylesheet" type="text/css" href="../static/css/elementui-ui-font.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/elementui.css"/>
    <script src="../static/js/Vue-2.6.12.js" type="text/javascript" charset="utf-8"></script>
    <script src="../static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../static/js/elementui.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 78px;
            display: block;
        }
        .el-row {
            margin-bottom: 20px;
            &:last-child {
                 margin-bottom: 0;
             }
        }
        .el-col {
            border-radius: 4px;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
    </style>
</head>
<body>

<div id="app">
    <el-row :gutter="24">
    </el-row>
    <el-row :gutter="24">
        <el-col :span="4">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="16">
            <el-form :inline="true" :model="brandForm" class="demo-form-inline">
                <el-form-item label="品牌名">
                    <el-input v-model="brandForm.name" placeholder="品牌名"></el-input>
                </el-form-item>
                <el-form-item label="首字母">
                    <el-input v-model="brandForm.letter" placeholder="首字母"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findBrand">查询</el-button>
                    <el-button type="success" @click="dialogFormVisible=true,brand={}">新增</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="brandList" style="width: 100%" border v-loading="loading">
                <el-table-column prop="id" label="编号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="品牌名" width="180">
                </el-table-column>
                <el-table-column prop="letter" label="首字母" width="180">
                </el-table-column>
                <el-table-column label="图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.image" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="edit(scope.row.id)" icon="el-icon-edit" circle></el-button>
                        <el-button type="danger" @click="del(scope.row.id)" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="findBrand" @current-change="findBrand" :current-page.sync="currentPage"
                           :page-sizes="[10, 20, 30, 40]"
                           :page-size.sync="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>

            <!-- 新增窗口 -->
            <el-dialog title="保存品牌" :visible.sync="dialogFormVisible">
                <el-form :model="brand">
                    <el-form-item label="品牌id" label-width="100px" hidden>
                        <el-input v-model="brand.id"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌名称" label-width="100px">
                        <el-input v-model="brand.name"></el-input>
                    </el-form-item>
                    <el-form-item label="首字母" label-width="100px">
                        <el-input v-model="brand.letter" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌图像" label-width="100px">
                        <el-upload class="avatar-uploader" action="/api/file/img.do?load=brand" :show-file-list="false"
                                   :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="brand.image" :src="brand.image" class="avatar" width="120px" height="50px">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="排序" label-width="100px">
                        <el-input v-model="brand.seq" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">保存</el-button>
                </div>
            </el-dialog>

        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple"></div>
        </el-col>
    </el-row>

</div>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: function () {
            return {
                brandList: [],
                total: 100,
                size: 10,
                currentPage: 1,
                brandForm: {},
                dialogFormVisible: false,
                brand: {},
                loading:true
            }
        },
        methods: {
            findBrand() {
                let searForm = new URLSearchParams(this.brandForm).toString()
                axios.post(`/api/brand/findcondtionpage.do?startpage=${this.currentPage}&pagesize=${this.size}`, searForm).then(
                    response => {
                        this.brandList = response.data.records
                        this.total = response.data.total
                        this.loading = false
                    }).catch(function (error) {
                    console.log(error);
                })
            },
            save() {
                let id = this.brand.id
                let action = id == null ? 'save' : 'update'
                axios.post(`/api/brand/${action}.do`, this.brand).then((response) => {
                    if (response.data.code == 1) {
                        this.dialogFormVisible = false
                        this.$message.error(response.data.msg)
                    } else {
                        this.dialogFormVisible = false
                        this.$message({
                            message: response.data.msg,
                            type: 'success',
                        })
                        this.findBrand()
                    }
                }).catch((error) => {
                    this.$message({
                        message: '添加失败，请重试或请联系管理员',
                        type: 'warning',
                    })
                })
            },
            edit(id) {
                axios.get(`/api/brand/findbyid.do?id=${id}`).then((resp) => {
                    this.brand = resp.data
                    this.dialogFormVisible = true
                })
            },
            del(id) {
                this.$confirm("确认删除？", '确认删除').then(() => {
                    axios.get(`/api/brand/deletebyid.do?id=${id}`).then((response) => {
                        if (response.data.code == 1) {
                            this.$message.error(response.data.msg)
                        } else {
                            this.$message.success(response.data.msg)
                            this.findBrand()
                        }
                    })
                })
            },
            handleAvatarSuccess(res, file) {
                this.brand.image = file.response
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        created() {
            this.findBrand()
        }
    })
</script>
</body>
</html>
